<template>
  <div ref="warp" class="contentWarpBox">
    <div class="searchInfo">
      <div class="left" />
      <el-button
        v-if="accreditChildren.createMemberLevel"
        class="right"
        type="primary"
        @click="createLevel('create')"
      >新建会员等级</el-button>
    </div>
    <el-table
      ref="table"
      stripe
      :data="tableData"
      :height="this.$getTableHeight"
      border
      tooltip-effect="dark"
    >
      <el-table-column label="等级名称">
        <template slot-scope="scope">{{ scope.row.id?scope.row.levelName:'&nbsp;' }}</template>
      </el-table-column>
      <el-table-column label="等级值" prop="levelValue" />
      <el-table-column label="最大值" prop="maximum" />
      <el-table-column prop="minimum" label="最小值" />
      <el-table-column label="操作" width="190">
        <template slot-scope="scope">
          <span v-if="scope.row.id">
            <span
              v-if="accreditChildren.editMemberLevel"
              class="_primary"
              @click="createLevel(scope.row)"
            >编辑</span>
            <span
              v-if="accreditChildren.deletedMemberLevel"
              class="_delete"
              @click="deleteInfo(scope.row)"
            >删除</span>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <Pagination
        class="right"
        :total-count="totalCount"
        :page-size="page.pageSize"
        :current-page="page.pageNo"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </div>
    <el-dialog
      :close-on-click-modal="false"
      :title="isCreate ? '新建会员等级':'编辑会员等级'"
      :visible.sync="dialogVisible"
      center
      width="700px;"
      :before-close="handleClose"
    >
      <el-form
        ref="form1"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="等级名称：" prop="levelName">
          <el-input v-model="ruleForm.levelName" />
        </el-form-item>
        <el-form-item label="等级值：" prop="levelValue">
          <el-input v-model="ruleForm.levelValue" />
        </el-form-item>
        <el-form-item label="最大值：" prop="maximum">
          <el-input v-model="ruleForm.maximum" />
        </el-form-item>
        <el-form-item label="最小值：" prop="minimum">
          <el-input v-model="ruleForm.minimum" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitVal">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '~/components/commom/pagination';
import mmUrl from '~/utils/utilUrl';
import {
  _currentChange,
  _sizeChange,
  _changeTable,
  _deleteMethods,
  _searchInfo,
  createDics,
  reduceArr,
  changeTableHeight
} from '~/utils/util';
import initData from '~/utils/initData';
import regular from '~/utils/regular';
export default {
  components: {
    Pagination
  },
  data() {
    return {
      dialogVisible: false,
      isCreate: true,
      loading: true,
      totalCount: 0,
      tableData: [],
      editorId: null,
      accreditChildren: {},
      ruleForm: {
        levelName: null,
        levelValue: null,
        maximum: null,
        minimum: null
      },
      rules: {
        levelName: regular.require50,
        levelValue: regular.positive,
        maximum: regular.positive,
        minimum: regular.positive
      },
      changeSelectOr: false,
      page: {
        maxResultCount: 0,
        pageNo: 0,
        pageSize: 10,
        skipCount: 0
      },
      copysearInfo: {
        keyword: ''
      },
      searInfo: {
        keyword: ''
      }
    }
  },
  mounted() {
    this.getInitTableData()
    const result = JSON.parse(sessionStorage.getItem('menu'))
    this.accreditArr = reduceArr(result, '/' + this.$route.name)
    this.accreditChildren = createDics(
      this.accreditArr.children,
      'permissionCode'
    )
  },
  methods: {
    submitVal() {
      this.$refs['form1'].validate(valid => {
        if (valid) {
          this.$post({
            url: this.isCreate
              ? mmUrl.memberLevel.create
              : mmUrl.memberLevel.editor,

            data: {
              item: {
                levelName: this.ruleForm.levelName,
                levelValue: Number(this.ruleForm.levelValue),
                maximum: Number(this.ruleForm.maximum),
                minimum: Number(this.ruleForm.minimum),
                id: this.isCreate ? null : this.editorId
              }
            }
          }).then(res => {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.searchInfoMation('no')
            this.$refs['form1'].resetFields()
            this.dialogVisible = false
            this.ruleForm = {}
          })
        }
      })
    },
    handleClose() {
      this.$refs['form1'].resetFields()
      this.ruleForm = {}
      this.dialogVisible = false
    },
    createLevel(res) {
      this.dialogVisible = true
      if (res === 'create') {
        this.isCreate = true
      } else {
        this.isCreate = false
        this.editorId = res.id
        this.ruleForm = res
      }
    },
    getInitTableData() {
      this.$post({
        url: mmUrl.memberLevel.get,
        data: {
          keyword: '',
          page: {
            maxResultCount: 0,
            pageNo: 0,
            pageSize: 10,
            skipCount: 0
          }
        }
      }).then(res => {
        this.totalCount = res.items.totalCount
        this.tableData = res.items.items
        this.loading = false
        changeTableHeight(this)
      })
    },
    deleteInfo(row) {
      const that = this
      _deleteMethods(mmUrl.memberLevel.delete, row, that).then(() => {
        that.searchInfoMation('no')
      })
    },
    searchInfoMation(res) {
      this.copysearInfo = JSON.parse(JSON.stringify(this.searInfo))
      const result = _searchInfo(res, this.page, this.copysearInfo)
      this.changeTableData(result)
    },
    handleSizeChange(val) {
      const result = _sizeChange(val, this.page, this.copysearInfo)
      this.changeTableData(result)
    },
    handleCurrentChange(val) {
      const result = _currentChange(val, this.page, this.copysearInfo)
      this.changeTableData(result)
    },
    changeTableData(res) {
      const that = this
      _changeTable(mmUrl.memberLevel.get, res, that)
    }
  }
}
</script>

<style>
</style>
